<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>COVID-19 数据可视化</title>
    <script src="static/js/echarts.js"></script>
    <style>
        .chart-container {
            width: 90%;
            height: 600px;
            margin: 20px auto;
            box-shadow: 0 2px 15px rgba(0, 0, 0, 0.1);
            border-radius: 10px;
            background: #fff;
        }
    </style>
</head>

<body>
    <div class="chart-container" id="roseChart"></div>
    <div class="chart-container" id="treemapChart"></div>

    <script>
        // 南丁格尔玫瑰图
        const initRoseChart = () => {
            const chart = echarts.init(document.getElementById('roseChart'));

            fetch('/get_rose_data')
                .then(res => res.json())
                .then(data => {
                    const option = {
                        title: {
                            text: 'COVID-19 确诊病例分布',
                            subtext: '数据按月统计',
                            left: 'center'
                        },
                        tooltip: {
                            trigger: 'item',
                            formatter: ({ name, value, data }) => `
                                <strong>${name}</strong><br/>
                                确诊：${value.toLocaleString()}<br/>
                                死亡：${data.deaths.toLocaleString()}<br/>
                                康复：${data.recovered.toLocaleString()}
                            `
                        },
                        series: [{
                            type: 'pie',
                            radius: [50, 250],
                            center: ['50%', '55%'],
                            roseType: 'area',
                            itemStyle: {
                                borderRadius: 8,
                                borderColor: '#fff',
                                borderWidth: 2
                            },
                            label: {
                                show: true,
                                fontSize: 12,
                                formatter: '{b}'
                            },
                            data: data.sort((a, b) => b.value - a.value)
                        }],
                        toolbox: {
                            right: 20,
                            feature: {
                                saveAsImage: {
                                    title: '保存图片',
                                    pixelRatio: 2
                                }
                            }
                        }
                    };
                    chart.setOption(option);
                });

            window.addEventListener('resize', () => chart.resize());
        };

        // 四分色矩形树图
        const initTreemapChart = () => {
            const chart = echarts.init(document.getElementById('treemapChart'));

            fetch('/get_treemap_data')
                .then(res => res.json())
                .then(data => {
                    // 计算四分位值
                    const allValues = data.children.flatMap(
                        month => month.children.map(day => day.value)
                    ).sort((a, b) => a - b);

                    const q1 = allValues[Math.floor(allValues.length * 0.25)];
                    const q2 = allValues[Math.floor(allValues.length * 0.5)];
                    const q3 = allValues[Math.floor(allValues.length * 0.75)];
                    const maxValue = allValues[allValues.length - 1];

                    const option = {
                        title: {
                            text: 'COVID-19 数据层级分布',
                            subtext: '颜色表示病例严重程度',
                            left: 'center'
                        },
                        tooltip: {
                            formatter: ({ name, value, data }) => `
                                <strong>${name}</strong><br/>
                                总病例：${(value || 0).toLocaleString()}<br/>
                                确诊：${(data?.confirmed || 0).toLocaleString()}<br/>
                                死亡：${(data?.deaths || 0).toLocaleString()}<br/>
                                康复：${(data?.recovered || 0).toLocaleString()}
                            `
                        },
                        series: [{
                            type: 'treemap',
                            data: [data],
                            levels: [
                                { // 月份层级
                                    itemStyle: {
                                        borderColor: '#fff',
                                        borderWidth: 3,
                                        gapWidth: 3
                                    },
                                    upperLabel: {
                                        show: true,
                                        height: 30,
                                        color: '#333'
                                    }
                                },
                                { // 日期层级
                                    itemStyle: {
                                        borderColor: '#f8f8f8',
                                        gapWidth: 2
                                    },
                                    label: {
                                        show: true,
                                        fontSize: 11,
                                        color: '#666'
                                    }
                                }
                            ],
                            visualMap: {
                                type: 'piecewise',
                                pieces: [
                                    { min: 0, max: q1, label: '低', color: '#A8D8B9' },
                                    { min: q1 + 0.1, max: q2, label: '中', color: '#FFD700' }, // +0.1避免区间重叠
                                    { min: q2 + 0.1, max: q3, label: '高', color: '#FFA07A' },
                                    { min: q3 + 0.1, max: maxValue, label: '严重', color: '#CD5C5C' }
                                ],
                                orient: 'horizontal',
                                left: 'center',
                                bottom: 20,
                                textStyle: {
                                    color: '#666',
                                    fontSize: 12
                                }
                            },
                            breadcrumb: {
                                show: true,
                                height: 28,
                                itemStyle: {
                                    color: '#666',
                                    borderColor: '#ddd'
                                }
                            }
                        }],
                        toolbox: {
                            right: 20,
                            feature: {
                                restore: { title: '重置' },
                                saveAsImage: {
                                    title: '保存',
                                    pixelRatio: 2
                                }
                            }
                        }
                    };
                    chart.setOption(option);
                });

            window.addEventListener('resize', () => chart.resize());
        };

        // 页面加载后初始化
        window.addEventListener('DOMContentLoaded', () => {
            initRoseChart();
            initTreemapChart();
        });
    </script>
</body>

</html>